﻿@{ Layout = null; }

<form id="employeeForm">
    @Html.Hidden("id")
    <div class="row">
        <div class="col-one-input-label"><span>Title:</span></div>
        @Html.TextBox("title", null, new { @class = "col-one-input-field" })

        <div class="col-separator">&nbsp;</div>

        <div class="col-two-input-label"><span>Title of Courtesy:</span></div>
        @Html.TextBox("titleOfCourtesy", null, new { @class = "col-two-input-field" })
    </div>

    <div class="row">
        <div class="col-one-input-label"><span>First Name:</span></div>
        @Html.TextBox("firstName", null, new { @class = "col-one-input-field", @validationMessage = "First Name is a required field", @required = "required" })

        <div class="col-separator">&nbsp;</div>

        <div class="col-two-input-label"><span>Last Name:</span></div>
        @Html.TextBox("lastName", null, new { @class = "col-two-input-field", @validationMessage = "Last Name is a required field", @required = "required" })
    </div>

    <div class="row error-row hidden-row">
        <div style="width:250px;display:inline-block;"><span data-for="firstName" class="k-invalid-msg"></span></div>

        <div class="col-separator">&nbsp;</div>

        <div style="width:250px;display:inline-block;"><span data-for="lastName" class="col-two-input-field k-invalid-msg"></span></div>
    </div>

    <div class="row">
        <div class="col-one-input-label"><span>Extension:</span></div>
        @Html.TextBox("extension", null, new { @class = "col-one-input-field" })

        <div class="col-separator">&nbsp;</div>

        <div class="col-two-input-label"><span>Home Phone:</span></div>
        @Html.TextBox("homePhone", null, new { @class = "col-two-input-field" })
    </div>

    <div class="row">
        <div class="col-one-input-label"><span>Address:</span></div>
        @Html.TextArea("address")
    </div>

    <div class="row">
        <div class="col-one-input-label"><span>City:</span></div>
        @Html.TextBox("city", null, new { @class = "col-one-input-field" })

        <div class="col-separator">&nbsp;</div>

        <div class="col-two-input-label"><span>Region:</span></div>
        @Html.TextBox("region", null, new { @class = "col-two-input-field" })
    </div>

    <div class="row">
        <div class="col-one-input-label"><span>Country:</span></div>
        @Html.TextBox("country", null, new { @class = "col-one-input-field" })

        <div class="col-separator">&nbsp;</div>

        <div class="col-two-input-label"><span>Postal Code:</span></div>
        @Html.TextBox("postalCode", null, new { @class = "col-two-input-field" })
    </div>

    <div class="row">
        <div class="col-one-input-label"><span>Birth Date:</span></div>
        @Html.Kendo().DatePicker().Name("birthDate").HtmlAttributes(new { @class = "col-one-input-field" })

        <div class="col-separator">&nbsp;</div>

        <div class="col-two-input-label"><span>Hire Date:</span></div>
        @Html.Kendo().DatePicker().Name("hireDate").HtmlAttributes(new { @class = "col-two-input-field" })
    </div>

    <div class="row">
        <div class="col-one-input-label"><span>Reports To:</span></div>
        @(Html.Kendo().DropDownList()
            .Name("reportsTo")
            .DataTextField("FullName")
            .DataValueField("EmployeeID")
            .HtmlAttributes(new { @style = "width:200px;" })
        )
    </div>
</form>

<div id="windowButtonRow" class="window-button-row">
    <a class="k-button window-button" onclick="EmployeeDetails.onButtonClick(this);">OK</a>
    <a class="k-button window-button" onclick="EmployeeDetails.onButtonClick(this);">Cancel</a>
</div>
